<template>
  <section>
    <div class="searchBox">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="卡类型">
          <el-select v-model="form.identityType" placeholder="请选择类型">
            <el-option label="IC卡" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="卡号" v-if="false">
          <el-input v-model="form.identityID" placeholder="请输入卡号"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item v-if="false">
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="rightBox">
        <el-button type="primary" @click="handleAddIcCard">添加</el-button>
        <el-button type="danger" @click="handleDelete">单个删除</el-button>
        <el-button type="danger" @click="delAccessCardList">一键清除</el-button>
      </div>
    </div>
    <br>
    <div class="tableBox">
      <template>
        <el-table :data="tableData" border
        :max-height="480"
        :min-height="300"
        @selection="singleElection"
        >
          <el-table-column type="selection" width="50" align="center">
            <template slot-scope="scope">
              <el-radio class="radio no-show-label" v-model="templateSelection" :label="scope.row.identityData"
                >{{ '' }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column prop="identityType" label="卡类型" align="center"/></el-table-column>
          <el-table-column prop="identityData" label="卡号" align="center"/></el-table-column>
          <el-table-column prop="effectiveStartTime" label="开始时间" align="center"/></el-table-column>
          <el-table-column prop="validEndTime" label="结束时间" align="center"/></el-table-column>
        </el-table>
      </template>
    </div>
    <div class="bottomBox">
      <pagination
        :limit.sync="form.pageSize"
        :page.sync="form.pageNum"
        :pageSizes="[10, 20, 40]"
        :total="total"
        @pagination="changePage"
      />
    </div>

    <addIcCard
      ref="addIcCardRef"
      :personId="personId"
      @submitAddIcCard="submitAddIcCard"
    />
  </section>

</template>

<script>
// import {
//   getPersonAccessCardApi,
//   addPersonAccessCardApi,
//   delAccessCardListApi,
//   delPersonAccessCardApi,
// } from "@/api/personnel";
import addIcCard from "../components/addIcCard";

import {getEventIdentity, uploadPersonFace, deleteIcCardList} from "@/api/community/person";

export default {
  components:{
    addIcCard
  },
  props: {
    personId: {
      type: String,
      default: "",
    },
  },
  data: function () {
    return {
      templateSelection: "",
      cardTypeObj: {
        '3':"ic 卡",
        '':"ic 卡",
        undefined:"ic 卡",
        null:"ic 卡",
      },
      form: {
        personId: this.personId,
        identityType: "",
        cardType: "",
        type: "icCard",
        cardNum: "",
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [],
      multipleSelection: [],
      total: 0,
      addIcCardRef: ''
    }
  },
  created() {
    this.getPersonAccessCard();
  },
  methods: {
    cardType(val) {
      switch (val) {
        case 3:
          val = "ic 卡";
          break;
        case '':
          val = "ic 卡";
          break;
        case 'undefined':
          val = "ic 卡";
          break;
        case 'null':
          val = "ic 卡";
          break;
        default:
          break;
      }
      return val;
    },
    handleAddIcCard() {
      this.$refs.addIcCardRef.open()
    },
    singleElection(row) {
      this.templateSelection = row.identityData.toString();
      this.checkList = this.tableData.filter((item) => item.index === row.index)
      console.log(141, this.templateSelection);
    },
    changePage(val) {
      // console.log(123, val);
      this.form.pageNum = val.page;
      this.getPersonAccessCard();
    },
    getPersonAccessCard() {
      getEventIdentity(this.form).then((res) => {
        console.log(104, res);
        if (!res.datalist) {
          this.tableData = [];
        } else {
          res.datalist.forEach((item) => {
            item.identityType = this.cardType(item.identityType)
            item.effectiveStartTime = this.$moment(item.effectiveStartTime * 1000).format("YYYY-MM-DD")
            item.validEndTime = this.$moment(item.validEndTime * 1000).format("YYYY-MM-DD")
          });
          this.tableData = res.datalist;
        }
        this.total = res.totalnum;
        this.templateSelection = ''
      });
    },
    onSubmit() {
      console.log("submit!");
      this.getPersonAccessCard();
    },
    reset() {
      this.form.identityType = "";
      this.form.identityID = "";
      this.getPersonAccessCard();
    },
    submitAddIcCard(val) {
      const params = {...val}
      delete params.effectivedate
      uploadPersonFace(params).then((res) => {
        if (res) {
          this.$refs.addIcCardRef.cancel();
          this.getPersonAccessCard();
          this.$message.success('添加成功')
        }
      });
    },
    handleDelete() {
      let self = this;
      console.log(177,this.tableData);
      if (!this.templateSelection) {
        this.$message.warning("必须选择1条才能删除");
        return false;
      }
      let oNum;
      this.tableData.forEach((item) => {
        if (item.identityData == this.templateSelection) {
          oNum = item.identityData;
        }
      })
      let params = {
        type: 1,
        personId: this.personId,
        identityData: oNum,
      };
      this.$confirm("请问是否删除该条ic卡?", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteIcCardList(params).then((res) => {
            self.getPersonAccessCard();
          });
        })
        .catch((err) => {
          // ElMessage({
          //   type: "info",
          //   message: "取消删除",
          // });
        });
    },
    // 一键清除
    delAccessCardList() {
      let self = this;
      let params = {
        type: 0,
        personId: this.personId,
      };
      this.$confirm("请问是否删除所有ic卡?", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteIcCardList(params).then((res) => {
            self.getPersonAccessCard();
          });
        })
        .catch((err) => {
          // ElMessage({
          //   type: "info",
          //   message: "取消删除",
          // });
        });
    },

    delIcCard(val) {
      console.log(val);
      let params = {
        accessCardId: val.accessCardId,
      };
      delPersonAccessCardApi(params).then((res) => {
        if (res.code == 200) {
          this.getPersonAccessCard();
        }
      });
    },
  },
}

</script>

<style lang="scss" scoped>
::v-deep .el-table-column--selection .el-checkbox {
  visibility: hidden;
}

.el-table-column--selection label {
  width: 10px;
}

.searchBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .leftBox,
  .rightBox {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

.bottomBox {
  height: 60px;
  display: flex;
  justify-content: flex-end;
}

.bottomBox .pagination-container {
  background: none;
}

.btn-red {
  color: #f0142f;
  border-color: #fcd5d9;

  &:hover,
  &:focus,
  &:active {
    color: #f0142f;
    border-color: #fcd5d9;
  }
}
</style>
